<!-- subpkg_consult/department/index.vue -->
<script setup>
	import { departmentListApi } from '@/services/consult.js'
	import { ref, computed } from 'vue'
	defineProps({
		type: String,
		illnessType: String,
	})
	const list = ref([])

	const activeIndex = ref(0)

	;(async () => {
		const res = await departmentListApi()
		list.value = res.data
	})()

	const depchildren = computed(() => list.value[activeIndex.value]?.child)
</script>

<template>
	<view class="department-page">
		<scroll-view scroll-y class="department-primary">
			<view
				class="department-item"
				v-for="(v, i) in list"
				:key="v.id"
				:class="{ active: i === activeIndex }"
				@click="activeIndex = i"
				>{{ v.name }}</view
			>
		</scroll-view>
		<scroll-view class="department-secondary">
			<navigator
				v-for="v in depchildren"
				:key="v.id"
				hover-class="none"
				:url="`/subpkg_consult/description/index?type=${type}&illnessType=${illnessType}&depId=${v.id}`"
				class="department-item"
			>
				{{ v.name }}
			</navigator>
		</scroll-view>
	</view>
</template>

<style lang="scss">
	@import './index.scss';
</style>
